<template>
	<view class="components tn-safe-area-inset-bottom">
		<!-- 顶部自定义导航 -->
		<tn-nav-bar :isBack="false" :bottomShadow="false" backgroundColor="none">
		  <view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left" @click="tn('/minePages/message')">
		    <view class="custom-nav__back">
		      <text class="tn-text-bold tn-text-xl tn-color-black"></text>
		    </view>
		  </view>
		</tn-nav-bar>
<!-- 		<view class="top-backgroup">
			<image src='http://qiniucloud.qqdeveloper.com//2e70a012f23807e8fdd77d50e27e3978.jpg' mode='widthFix' class='backgroud-image'>
			</image>
		</view> -->

		<block v-for="(item, index) in navList" :key="index">
			<view :class="index == 0 ? 'nav_title--wrap tn-margin-bottom-sm ai-category' : 'nav_title--wrap tn-margin-bottom-sm'">
				<view class="nav_title tn-cool-bg-color-15">{{ item.title}}</view>
			</view>
			<view class='nav-list'>
				<block v-for="(content_item, content_index) in item.app" :key="content_index">
					<view hover-class='none' @click="clickMenu(content_item.page_url)"
						class="nav-list-item tn-shadow-blur tn-cool-bg-image tn-flex tn-flex-col-center tn-flex-row-between"  :style="'background-color: '+content_item.bg_color + ';'">
						<view class="nav-link tn-flex-1">
							<view class='title'>{{ content_item.title }}</view>
						</view>
						<view class="icon">
							<view style="width: 100%; height: 100%;"><image :src="content_item.url + content_item.path" style="width: 100%; height: 100%;"></image></view>
						</view>
					</view>
				</block>
			</view>
		</block>

		<view class="tn-padding-bottom-xs"></view>

	</view>
</template>

<script>
	import { aiAppList } from '@/utils/api/ai'
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	export default {
		name: 'ImageCategory',
		mixins: [template_page_mixin],
		data() {
			return {
				// navList: [{
				// 	title: 'AI工具',
				// 	backgroundColor: 'tn-cool-bg-color-1',
				// 	list: []
				// }],
				navList: []
			}
		},
		created() {
			this.getAiAppList()
		},
		methods: {
			clickMenu(url) {
				uni.navigateTo({
					url: url
				})
			},
			getAiAppList() {
				aiAppList({}).then(res => {
					this.navList = res.items
				})
			},
			getRandomCoolBg() {
				let color = [
					'red',
					'purplered',
					'purple',
					'bluepurple',
					'aquablue',
					'blue',
					'indigo',
					'cyan',
					'teal',
					'green',
					'yellowgreen',
					'lime',
					'yellow',
					'orangeyellow',
					'orange',
					'orangered',
					'brown',
					'grey',
					'gray'
				]
				const index = Math.floor(Math.random() * color.length)
				const colorValue = color[index]
				return 'tn-bg' + '-grey'// + colorValue
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/scss/tool_card_list.scss"
</style>